<template>
  <div class="Myex-ter">
    <p class="Service">
      <span class="Servi-e"><img src="../../../img/shouye/组 28.png" alt="" /></span>
      数据汇聚情况
      <span class="Servi-e"><img src="../../../img/shouye/组 27.png" alt="" /></span>
    </p>
    <el-row>
      <el-col :span="4">
        <div class="Gather-ministries">
          <div class="and-commissions">
            <p style="text-align: center; line-height: 65px">
              汇聚部委: <span style="font-weight: 700;font-size: 32px;">9</span>个
            </p>
          </div>
          <div class="and-commiss">
            <p style="text-align: center; line-height: 65px">
              汇聚地区: <span style="font-weight: 700;font-size: 32px;">13</span>个
            </p>
          </div>
        </div>
      </el-col>

      <el-col :span="12">

        <div class="Gather-mi">
          <div class="Gather-zo">
            <p>库表总量</p>
            <p> <span style="font-weight: 700;font-size: 32px;"> 1</span>个</p>
            <p> <span class="fon-oin" style=" background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;"> 今日新增 0 -</span></p>
          </div>

          <div class="Gather-zo">
            <p>数据总量</p>
            <p> <span style="font-weight: 700;font-size: 32px;"> 788</span>个</p>
            <p> <span class="fon-oin" style="background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;"> 今日新增 0 -</span></p>
          </div>

          <div class="Gather-zo">
            <p>数据项总量</p>
            <p> <span style="font-weight: 700;font-size: 32px;"> 13</span>个</p>
            <p> <span class="fon-oin" style=" background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;"> 今日新增 0 -</span></p>
          </div>

        </div>
      </el-col>

      <el-col :span="8">
        <div class="Gather-mini">

          <div class="Gather-zoi">
            <p>文件总量</p>
            <p> <span style="font-weight: 700;font-size: 32px;"> 123</span>个</p>
            <p> <span class="fon-oin" style="background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;"> 今日新增 0 -</span></p>
          </div>
          <div class="Gather-zoi">
            <p>文件大小</p>
            <p> <span style="font-weight: 700;font-size: 32px;"> 43</span>MB</p>
            <p> <span class="fon-oin" style="background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;"> 今日新增 0 -</span></p>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div class="Ministries">
          <p style="font-weight: 700;line-height: 50px;">各部委数据汇集情况
            <span style="float: right; width: 100px;">
              <el-select v-model="value" placeholder="累计">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </span>
          </p>
          <!-- 第一个可视化 -->
          <div id="Histogram" style="width: 100%;
height: 400px">111</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="Ministries">
          <p style="font-weight: 700;line-height: 50px;">各地区数据汇集情况
            <span style="float: right;width: 100px;">
              <el-select v-model="value" placeholder="累计">
              </el-select>
            </span>
          </p>
          <!-- 第二个可视化 -->
          <div id="di-to" class="di-to" style="width: 100%;height: 500px;margin-left:40px;">
          </div>
          
        </div>

      </el-col>
    </el-row>
    <!-- 最新数据汇集情况 -->
    <div class="Latest-data">
      <p style="font-weight: 700;line-height: 60px;border-bottom:1px solid #ddd;font-size: 16px;">最新数据汇聚情况</p>
      <el-row>
        <el-col :span="12">
          <div class="Jiangsu-Province" style="margin-right: 10px;color:#666666">
            <p style="line-height: 50px;font-weight: 900;color:black"> 资源名称：-- -- -- -- <span
                style="float: right; font-size: 14px;;color:#666666">数据来源：-- --</span> </p>
            <p style=" font-size: 14px;">资源类型：--  大小：-- <span style="float: right; font-size: 14px;">数据更新时间：---- -- --</span> </p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="Jiangsu-Province" style="margin-right: 10px;color:#666666">
            <p style="line-height: 50px;font-weight: 900;color:black"> 资源名称：-- -- -- -- <span
                style="float: right; font-size: 14px;;color:#666666">数据来源：-- --</span> </p>
            <p style=" font-size: 14px;">资源类型：--  大小：-- <span style="float: right; font-size: 14px;">数据更新时间：---- -- --</span> </p>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="Jiangsu-Province" style="margin-right: 10px;color:#666666">
            <p style="line-height: 50px;font-weight: 900;color:black"> 资源名称：-- -- -- -- <span
                style="float: right; font-size: 14px;;color:#666666">数据来源：-- --</span> </p>
            <p style=" font-size: 14px;">资源类型：--  大小：-- <span style="float: right; font-size: 14px;">数据更新时间：---- -- --</span> </p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="Jiangsu-Province" style="margin-right: 10px;color:#666666">
            <p style="line-height: 50px;font-weight: 900;color:black"> 资源名称：-- -- -- -- <span
                style="float: right; font-size: 14px;;color:#666666">数据来源：-- --</span> </p>
            <p style=" font-size: 14px;">资源类型：--  大小：-- <span style="float: right; font-size: 14px;">数据更新时间：---- -- --</span> </p>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="Jiangsu-Province" style="margin-right: 10px;color:#666666">
            <p style="line-height: 50px;font-weight: 900;color:black"> 资源名称：-- -- -- -- <span
                style="float: right; font-size: 14px;;color:#666666">数据来源：-- --</span> </p>
            <p style=" font-size: 14px;">资源类型：--  大小：-- <span style="float: right; font-size: 14px;">数据更新时间：---- -- --</span> </p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="Jiangsu-Province" style="margin-right: 10px;color:#666666">
            <p style="line-height: 50px;font-weight: 900;color:black"> 资源名称：-- -- -- -- <span
                style="float: right; font-size: 14px;;color:#666666">数据来源：-- --</span> </p>
            <p style=" font-size: 14px;">资源类型：--  大小：-- <span style="float: right; font-size: 14px;">数据更新时间：---- -- --</span> </p>
          </div>
        </el-col>
      </el-row>

    </div>
    <div class="vouint"></div>
  </div>
</template>



<script>
import shengfen from "./echartsMap/china.json";
import * as echarts from "echarts";
export default {
  data() {
    return {
      options: [{
        value: '1',
        label: '累计'
      }],
      value: ''
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var myecart = echarts.init(document.getElementById("Histogram"));
      myecart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          left: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '-5%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              interval: 'auto',
              rotate: 50 //设置倾斜角度，数值 可设置 正负 两种，
              },
            type: 'category',
            data: ['自然资源部', '生态环境部', '水利部', '农业农村部', '交通运输部', '公安部', '矿山安全监察局']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '库表',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#3272EE '

            },
            barWidth: 12,
            data: [0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '文件',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#5CCFFC '

            },
            barWidth: 12,
            data: [0, 0, 0, 0, 0, 0, 0]
          },

        ]
      });

      var myecart2 = echarts.init(document.getElementById("di-to"));
      echarts.registerMap('china', shengfen)
      const option = {
              // 标题
              tooltip: {
                trigger: 'item',
                showDelay: 0,
                transitionDuration: 0.2,
                backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
                borderColor: '#333', // 提示框浮层的边框颜色。
                borderWidth: 0, // 提示框浮层的边框宽。
                padding: 5, // 提示框浮层内边距，
                textStyle: {
                  // 提示框浮层的文本样式。
                  color: '#fff',
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                  fontFamily: 'sans-serif',
                  fontSize: 14,
                },
                formatter: function (a, b) {
                  if (a.data) {
                    return `地区:${a['name']}</br>接口数量: ${a['data'].cata_sum}</br>文件夹数量: ${a['data'].file_folder_sum}</br>文件数量: ${a['data'].file_sum}</br>库表数量: ${a['data'].table_sum}</br>库表质量评分: ${a['data'].data_quality}`;
                  } else {
                    `地区:${a['name']}`;
                  }
                },
              },
              grid:{
                left:50
              },
              backgroundColor: 'transparent',
              visualMap: {
                left: 'left',
                min: 0,
                max: 10,
                inRange: {
                  //有数据的颜色
                  symbol: 'rect',
                  color: ['#ffffff', '#175EE9'],
                },
                text: ['高', '低'],
                calculable: true,
                bottom:80
              },
              // 要显示的散点数据
              series: [
                {
                  type: 'map',
                  map: 'china',
                  // 这是要显示的数据
                  data: [],
                  // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
                  nameMap: {
                    '北京市': "北京重命名",
                    "天津市": '天津重命名'
                  },
                },
                
              ]
            }
            // 将配置应用到地图上
            myecart2.setOption(option);

    },
  },

};


</script>

<style>
.Myex-ter {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.Gather-ministries {
  height: 146px;
}

.Gather-mi {
  height: 147px;
  margin: 0 20px;
  background-image: linear-gradient(#f2f8ff, #FFF);
  border-bottom: 1px solid #E9F2FF;
}

.Gather-mini {
  height: 147px;
  background-image: linear-gradient(#f2f8ff, #FFF);
  border-bottom: 1px solid #E9F2FF;
}

.and-commissions,
.and-commiss {
  height: 65px;
  background-image: linear-gradient(#f2f8ff, #FFF);
  border-bottom: 1px solid #E9F2FF;
}

.and-commiss {
  margin-top: 16px;
}

.Gather-zo {
  width: 30%;
  float: left;
  /* background-color: #fff; */
}

.Gather-zoi {
  width: 50%;
  line-height: 45px;
  text-align: center;
  float: left;
}

.Gather-zoi>p {
  text-align: left;
  line-height: 15px;
  margin-top: 20px;
  padding-left: 40px;
}

.Gather-zo>p {
  text-align: left;
  line-height: 15px;
  margin-top: 20px;
  padding-left: 40px;
}

.Service {
  margin-bottom: 10px;
}

.Ministries {
  margin-top: 20px;
  height: 470px;
  margin-top: 20px;
  padding: 10px;
  background-color: #F6FAFF;
  border: 1px solid #E2E7EF;
}

/* 最新数据汇集情况 */
.Latest-data {
  height: 100%;
  padding: 10px;
  margin-top: 30px;
  background-color: #F6FAFF;
  border: 1px solid #E2E7EF;
}

.Jiangsu-Province {
  height: 80px;
  margin-top: 3px;
  border-bottom: 1px dashed #ccc;
  /* background-color: rgb(253, 185, 185); */
}

.fon-oin {
  display: inline-block;
  padding: 5px 7px;
  line-height: 24px;
  padding: 0 7px;
  border-radius: 4px;
}

.vouint {
  width: 100%;
  height: 30px;
  background-color: #fff;
}
</style>
